<script>
import {defineComponent, toRefs, reactive, onMounted} from 'vue';
import Sidebar from '../common/Sidebar.vue';
import Header from '../common/Header.vue';
import axios from 'axios';
import hotel from "@/views/hotel/Hotel.vue";
import {Plus,Search} from "@element-plus/icons-vue";

export default defineComponent({
  name: "Guide",
  computed: {
    Search() {
      return Search
    }
  },
  components: {
    Plus,
    Sidebar,
    Header,
  },
  data() {
    return {
      guideList : [],
      complaintsList:[],
      currentTable: 'register', // 初始选中的标签页
      visitorCount: 0,
      Location:null,
      registerList: [],
      qualificationList:[],
      reportList:[],
      applyList:[],
      editingGuideRow: null,
      searchQuery: '',
      itinerary:[]
    }
  },
  watch: {
    // 监听searchQuery的变化
    searchQuery(newValue, oldValue) {
      // 当searchQuery的值变化时，调用这个函数
      // 你可以在这里执行任何你需要的逻辑
      this.searchGuide(newValue);
    },
  },
  mounted() {
    // 在组件挂载时发送请求获取商品信息
    this.fetchGuide();
    this.fetchRegister();
    this.fetchQualification();
    this.fetchReport();
    this.fetchApply();
  },
  methods:{
    async searchGuide(keyword){
      await axios.get(`http://localhost:8084/searchguide?keyword=${keyword}`).then(response => {
        this.guideList = response.data;
      });
    },

    addRow() {
      const newRow = {
        id: this.guideList[this.guideList.length-1].id+1,// 根据实际情况，可能需要生成一个唯一的ID
        name: '空',
        age: 0,
        gender: '男',
        phoneNumber: '空',
        email: '空',
        qualification:'空',
        status:'未注册通过',
        teamID:'0',
      };
      this.guideList.push(newRow);
      this.editingGuideRow = this.guideList.length-1;
      axios.post(`http://localhost:8084/insertguide`, {
        id: newRow.id,
        score:'60'
      }, {
        headers: {
          'Content-Type':'application/json',
        },
      })
      axios.post(`http://localhost:8084/insertrealtimeInfo`, {
        id: newRow.id,
        guideID: newRow.id,
        Location:null,
        visitorCount:0,
        timestamp:null,
      }, {
        headers: {
          'Content-Type':'application/json',
        },
      })
    },

    async deleteGuide(id){
      await axios.get(`http://localhost:8084/deleteguide?id=${id}`);
      await axios.get(`http://localhost:8084/deleterealtimeInfo?id=${id}`)
      this.fetchGuide();
    },

    handleGuideEdit(index) {
      this.editingGuideRow = index;
    },
    async handleGuideEditEnd(index) {
      // 可以在这里添加保存逻辑
      this.editingGuideRow = null;
      await axios.post("http://localhost:8084/updateguide", {id: this.guideList[index].id,
        name: this.guideList[index].name,
        status: this.guideList[index].status,
        age: this.guideList[index].age,
        gender : this.guideList[index].gender,
        qualification: this.guideList[index].qualification,
        email: this.guideList[index].email,
        teamID: this.guideList[index].teamID,
        phoneNumber: this.guideList[index].phoneNumber,
      },{headers: {
          'Content-Type':'application/json',
        },})
          .then(response => {
            // 请求成功，处理响应
            console.log('景区信息更新成功', response.data);
            // 你可以在这里根据响应更新UI或进行其他操作
          })
          .catch(error => {
            // 请求失败，处理错误
            if (error.response) {
              // 服务器返回了错误信息
              console.error('更新景区信息失败:', error.response.data);
            } else if (error.request) {
              // 请求已经发起，但没有收到响应
              console.error('请求已发送，但没有收到响应');
            } else {
              // 设置请求时触发了错误
              console.error('请求配置中发生错误');
            }
            // 在这里可以添加一些额外的错误处理逻辑，比如通知用户
          });
    },

    viewGuide(id) {
      axios.get(`http://localhost:8084/searchrealtimeInfoByGuideID?guideID=${id}`)
          .then(response => {
            this.visitorCount = response.data.visitorCount;
            this.location = response.data.location;
          })

    },
    fetchGuide() {
      axios.get('http://localhost:8084/guide') // 根据实际情况修改接口地址
          .then(response => {
            this.guideList = response.data;
          })
          .catch(error => {
            console.error('获取景区列表失败:', error);
          });
    },
    fetchRegister(){
      axios.get(`http://localhost:8084/selectAllRegister`)
          .then(response => {
            this.registerList = response.data;
          })

    },
    fetchQualification(){
      axios.get(`http://localhost:8084/selectAllUpgrade`)
          .then(response => {
            this.qualificationList = response.data;
          })
    },
    fetchReport(){
      axios.get(`http://localhost:8084/selectAllReport`)
          .then(response => {
            this.reportList = response.data;
          })
    },
    fetchApply(){
      axios.get(`http://localhost:8084/selectAllApply`)
          .then(response => {
            this.applyList = response.data;
          })
    },
    async passRegister(id,guideID){
      await axios.get(`http://localhost:8084/passRegister?id=${id}&GuideID=${guideID}`)
      this.fetchRegister();
    },
    async passQualification(id,guideID,qualification){
      await axios.get(`http://localhost:8084/passUpgrade?id=${id}&GuideID=${guideID}&Qualification=${qualification}`)
      this.fetchQualification();
    },
    async passReport(id,guideID,teamID){
      await axios.get(`http://localhost:8084/passReport?id=${id}&GuideID=${guideID}&TeamID=${teamID}`)
      this.fetchReport();
    },
    async deleteTransactionByID(id){
      await axios.get(`http://localhost:8084/deleteTransactionByID?id=${id}`)
    },
    showTable(table) {
      this.currentTable = table;
    },
    async showItinerary(itineraryid){
      console.log(itineraryid);
        await axios.get(`http://localhost:8084/getItinerary?itineraryid=${itineraryid}`)
            .then(response=>{
              this.itinerary = response.data;
                console.log(this.itinerary)
              console.log(this.itinerary.itineraryid)
            })
    },
     async updateItinerary(id,itineraryid) {
      await axios.get(`http://localhost:8084/passItinerary?id=${id}&itineraryid=${itineraryid}&pass=true`)
    },
  },
})

</script>

<template>
  <body>
    <el-col style="height: 100%;">
      <Header />
      <el-row style="height: 100%;">
        <el-col :span="3" style="height: 100%;">
          <Sidebar />
        </el-col>
        <el-col :span="21" style="height: 100%; text-align: center;overflow-y: auto;" >
          <el-tabs type="border-card" class="background-image" style="height: 100%;">
            <el-tab-pane  label="基础信息" >
              <el-card >
              <template v-slot:label>
                <span class="label">基础信息</span>
              </template>
              <h1>导游基础信息</h1>
                <el-input type="text" v-model="searchQuery" placeholder="输入名字" style="width: 300px " :suffix-icon="Search"></el-input>
              <el-table :data="guideList" stripe height="400" style="width: 100%" class="guide-table">
                <el-table-column fixed prop="id" label="编号" width="100"  />
                <el-table-column prop="name" label="姓名" width="120" align="center">
                  <template v-slot="scope">
                    <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
                    <el-input v-if="editingGuideRow === scope.$index" v-model="scope.row.name" @blur="handleGuideEditEnd(scope.$index)"></el-input>
                    <div v-else @click="handleGuideEdit(scope.$index)">
                      {{ scope.row.name }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="age" label="年龄" width="120" align="center">
                  <template v-slot="scope">
                    <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
                    <el-input v-if="editingGuideRow === scope.$index" v-model="scope.row.age" @blur="handleGuideEditEnd(scope.$index)"></el-input>
                    <div v-else @click="handleGuideEdit(scope.$index)">
                      {{ scope.row.age }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="gender" label="性别" width="120" align="center">
                  <template v-slot="scope">
                    <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
                    <el-input v-if="editingGuideRow === scope.$index" v-model="scope.row.gender" @blur="handleGuideEditEnd(scope.$index)"></el-input>
                    <div v-else @click="handleGuideEdit(scope.$index)">
                      {{ scope.row.gender }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="qualification" label="导游资格" width="120" align="center">
                  <template v-slot="scope">
                    <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
                    <el-input v-if="editingGuideRow === scope.$index" v-model="scope.row.qualification" @blur="handleGuideEditEnd(scope.$index)"></el-input>
                    <div v-else @click="handleGuideEdit(scope.$index)">
                      {{ scope.row.qualification }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="phoneNumber" label="电话号码" width="150" align="center">
                  <template v-slot="scope">
                    <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
                    <el-input v-if="editingGuideRow === scope.$index" v-model="scope.row.phoneNumber" @blur="handleGuideEditEnd(scope.$index)"></el-input>
                    <div v-else @click="handleGuideEdit(scope.$index)">
                      {{ scope.row.phoneNumber }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="email" label="电子邮件" width="200" align="center">
                  <template v-slot="scope">
                    <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
                    <el-input v-if="editingGuideRow === scope.$index" v-model="scope.row.email" @blur="handleGuideEditEnd(scope.$index)"></el-input>
                    <div v-else @click="handleGuideEdit(scope.$index)">
                      {{ scope.row.email }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="teamID" label="所在旅行社编码" width="150" align="center">
                  <template v-slot="scope">
                    <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
                    <el-input v-if="editingGuideRow === scope.$index" v-model="scope.row.teamID" @blur="handleGuideEditEnd(scope.$index)"></el-input>
                    <div v-else @click="handleGuideEdit(scope.$index)">
                      {{ scope.row.teamID }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="status" label="注册状态" width="120" align="center">
                  <template v-slot="scope">
                    <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
                    <el-input v-if="editingGuideRow === scope.$index" v-model="scope.row.status" @blur="handleGuideEditEnd(scope.$index)"></el-input>
                    <div v-else @click="handleGuideEdit(scope.$index)">
                      {{ scope.row.status }}
                    </div>
                  </template>
                </el-table-column>
<!--                <el-table-column prop="complaints" label="投诉情况" width="120"  >-->
<!--                  <template #default="scope">-->
<!--                    <el-popover placement="right" :width="1000" trigger="click">-->
<!--                      <template #reference>-->
<!--                        <el-row>-->
<!--                          <el-button link type="primary">投诉</el-button>-->
<!--                          <el-text class="badge">5</el-text>-->
<!--                        </el-row>-->
<!--                      </template>-->
<!--                      <el-table :data="complaintsList">-->
<!--                        <el-table-column width="100" property="date" label="date" />-->
<!--                        <el-table-column width="100" property="state" label="State" />-->
<!--                        <el-table-column width="300" property="content" label="Content" />-->
<!--                      </el-table>-->
<!--                    </el-popover>-->
<!--                  </template>-->
<!--                </el-table-column>-->
                <el-table-column fixed="right" label="操作" min-width="120">
                  <template #default="scope">
                    <el-popover placement="right" :width="400" trigger="click">
                      <template #reference>
                        <el-button link type="primary" @click = viewGuide(scope.row.id)>详情</el-button>
                      </template>
                      <label>位置信息:{{location}}</label><br>
                      <label>团队人数:{{visitorCount}}</label>
                    </el-popover>
                    <el-button link type="primary" @click="deleteGuide(scope.row.id)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
                  <template #footer><el-button color="#9d2933" circle size="large" plain @click="addRow" ><el-icon><plus/></el-icon></el-button></template>
                </el-card>
            </el-tab-pane>

            <el-tab-pane label="审批" class="Config">
              <div class="button-container-config" style="display: flex; justify-content: center;">
                <el-button class="button-bar"  color="#337ecc" type="primary" size="large" round @click="showTable('register')">注册登记</el-button>
                <el-button class="button-bar"  color="#FF6C00" type="primary" size="large" round @click="showTable('qualification')" style="color: white">资格审验</el-button>
                <el-button class="button-bar"  color="#626aef" type="primary" size="large" round @click="showTable('report')">应聘审验</el-button>
                <el-button class="button-bar"  color="#07c160" type="primary" size="large" round @click="showTable('itinerary')">行程单申领</el-button>
              </div>
              <div class="Config-content">
                <div v-show="currentTable === 'register'">
                  <h1 style="display: flex; justify-content: left;">注册登记</h1>
                  <el-table :data="registerList" stripe height="400" style="width: 100%">
                    <el-table-column fixed prop="id" label="审核编号" width="150" />
                    <el-table-column prop="guideID" label="导游编号" width="150" />
                    <el-table-column prop="transactionType" label="审核类型" width="200" />
                    <el-table-column prop="transactionDate" label="审核提交日期" width="200" />
                    <el-table-column prop="deadDate" label="审核结束日期" width="200" />
                    <el-table-column prop="notes" label="备注" width="300" />
                    <el-table-column fixed="right" label="操作" min-width="120">
                      <template #default="scope">
                        <el-button link type="primary" @click="passRegister(scope.row.id,scope.row.guideID)">通过</el-button>
                        <el-button link type="primary" @click="deleteTransactionByID(scope.row.id)">否决</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>

                <div v-show="currentTable === 'qualification'">
                  <h1 style="display: flex; justify-content: left;">资格审验</h1>
                  <el-table :data="qualificationList" stripe height="400" style="width: 100%">
                    <el-table-column fixed prop="id" label="审核编号" width="150" />
                    <el-table-column prop="guideID" label="导游编号" width="150" />
                    <el-table-column prop="transactionType" label="审核类型" width="200" />
                    <el-table-column prop="transactionDate" label="审核提交日期" width="200" />
                    <el-table-column prop="deadDate" label="审核结束日期" width="200" />
                    <el-table-column prop="notes" label="提升资格等级" width="300" />
                    <el-table-column fixed="right" label="操作" min-width="120">
                      <template #default="scope">
                        <el-button link type="primary" @click="passQualification(scope.row.id,scope.row.guideID,scope.row.notes)">通过</el-button>
                        <el-button link type="primary" @click="deleteTransactionByID(scope.row.id)">否决</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <div v-show="currentTable === 'report'">
                  <h1 style="display: flex; justify-content: left;">应聘审核</h1>
                  <el-table :data="reportList" stripe height="400" style="width: 100%">
                    <el-table-column fixed prop="id" label="审核编号" width="150" />
                    <el-table-column prop="guideID" label="导游编号" width="150" />
                    <el-table-column prop="transactionType" label="审核类型" width="200" />
                    <el-table-column prop="transactionDate" label="审核提交日期" width="200" />
                    <el-table-column prop="deadDate" label="审核结束日期" width="200" />
                    <el-table-column prop="notes" label="应聘旅游社编号" width="300" />
                    <el-table-column fixed="right" label="操作" min-width="120">
                      <template #default="scope">
                        <el-button link type="primary" @click="passReport(scope.row.id,scope.row.guideID,scope.row.notes)">通过</el-button>
                        <el-button link type="primary" @click="deleteTransactionByID(scope.row.id)">否决</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <div v-show="currentTable === 'itinerary'">
                  <h1 style="display: flex; justify-content: left;">电子行程单申领</h1>
                  <el-table :data="applyList" stripe height="400" style="width: 100%">
                    <el-table-column fixed prop="id" label="审核编号" width="150" />
                    <el-table-column prop="guideID" label="导游编号" width="150" />
                    <el-table-column prop="transactionType" label="审核类型" width="200" />
                    <el-table-column prop="transactionDate" label="审核提交日期" width="200" />
                    <el-table-column prop="deadDate" label="审核结束日期" width="200" />
                    <el-table-column prop="notes" label="行程单" width="300">
                      <template #default="scope">

<!--                        <el-popover placement="right" :width="700" popper-style="height:10%" >-->
                          <el-popover
                              placement="right"
                              :width="700"
                              popper-style="min-height: 100px;"
                          ref="popover"
                          v-model="popoverVisible"
                           trigger="click">
                            <template #reference>
                              <el-button link type="primary" @click="showItinerary(scope.row.notes)">详情</el-button>
                            </template>
                          <el-card class="no-border-card">

                            <el-row :gutter="20">
                              <el-col :span="12">
                                <div class="text item">
                                  <span>行程单编号：</span>
                                  <span>{{ itinerary.itineraryid }}</span>
                                </div>
                              </el-col>
                              <el-col :span="12">
                                <div class="text item">
                                  <span>旅行社编号：</span>
                                  <span>{{ itinerary.teamid }}</span>
                                </div>
                              </el-col>
                            </el-row>
                            <el-row :gutter="20">
                              <el-col :span="12">
                                <div class="text item">
                                  <span>出发地：</span>
                                  <span>{{ itinerary.startpoint }}</span>
                                </div>
                              </el-col>
                              <el-col :span="12">
                                <div class="text item">
                                  <span>终点：</span>
                                  <span>{{ itinerary.terminal }}</span>
                                </div>
                              </el-col>
                            </el-row>
                            <el-row :gutter="20">
                              <el-col :span="24">
                                <div class="text item">
                                  <span>途经：</span>
                                  <span>{{ itinerary.wayposition }}</span>
                                </div>
                              </el-col>
                            </el-row>
                          </el-card>
                        </el-popover>
                      </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" min-width="120">
                      <template #default="scope">
                        <el-button link type="primary" @click="updateItinerary(scope.row.id,scope.row.notes)">通过</el-button>
                        <el-button link type="primary" @click="deleteTransactionByID(scope.row.id)">否决</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </el-col>
    <el-dialog
        :visible.sync="dialogVisible"
        width="50%"
        :modal="true"
        :close-on-click-modal="false"
    >
      <img :src="currentImagePath" alt="图片预览" style="width: 100%; height: auto;">
      <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
    </span>
    </el-dialog>
  </body>
</template>

<style scoped>
@import "../../assets/css/global.css";
.badge-sm {
  padding: 2px 6px;
  font-size: 0.8em;
  line-height: 0.9em;
}
.background-image {
  height: 100vh; /* 使容器高度占满视口 */
  background-image: url('/bg1.png');
  background-size: cover; /* 覆盖整个容器 */
  background-position: center; /* 图片居中 */
}

</style>
<style>
.el-tabs--border-card > .el-tabs__header {
  background-color: #fdfcfa;

}
</style>